<template>
	<common-card class="portal_task_progress">
		<div class="item">
			<h4>学院双化工作</h4>
			<a-progress color="#6e00ff" :show-text="false" :stroke-width="20" :percent="0" data-progress="0%" />
		</div>
		<div class="item">
			<h4>教学楼改造</h4>
			<a-progress color="#00b8da" :show-text="false" :stroke-width="20" :percent="0.2" data-progress="20%" />
		</div>
		<div class="item">
			<h4>十四五规划</h4>
			<a-progress color="#ff562f" :show-text="false" :stroke-width="20" :percent="0.2" data-progress="20%" />
		</div>
		<div class="item">
			<h4>教学评价</h4>
			<a-progress color="#37b37f" :show-text="false" :stroke-width="20" :percent="0.2" data-progress="20%" />
		</div>
	</common-card>
</template>

<script lang="ts" setup>
import commonCard from '../commonCard.vue';
import { getCurrWeek, getYearWeeks } from '@/utils/dayjsPlugin';
defineOptions({ name: 'TaskProgress' });
</script>

<style lang="scss" scoped>
.portal_task_progress {
	&:deep(.arco-card-body) {
		gap: 12px;
		flex-direction: column;
		padding: 16px !important;
	}
	h4 {
		line-height: 1;
		margin-bottom: 9px;
	}
	.arco-progress {
		display: block;
		--progress-text: attr(data-progress);
	}
	&:deep(.arco-progress-line-bar):before {
		display: block;
		color: #fff;
		width: 100%;
		padding: 0 10px;
		line-height: 20px;
		text-align: center;
		box-sizing: border-box;
		content: var(--progress-text);
	}
}
</style>
